<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="_meta :: header">
    <title>编辑</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form form form-horizontal" id="form-draft-edit" action="#"
              th:action="@{/admin/audio/addAudio}" th:object="${draft}" enctype="multipart/form-data">
            <input type="hidden" name="id" th:value="${draft.id}"/>
            <input type="hidden" id="action" name="action" value="">

            <div class="layui-form-item">
                <label class="layui-form-label"><span
                        class="c-red">*</span>稿件标题：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" th:value="${draft.draftTitle}" name="draftTitle"  placeholder="修改稿件标题" id="draftTitle" style="width:400px;"/>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span
                        class="c-red">*</span>文件名：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" th:value="${draft.fileName}" name="fileName"  placeholder="修改稿件标题" id="fileName" style="width:400px;"/>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span
                        class="c-red">*</span>稿件内容：</label>
                <div class="layui-input-block">
                    <script id="editor" readonly="true" th:text="${draft.draftText}" name="draftText" autofocus type="text/plain" style="height: 500px">
                    </script>
                    <input id="editorInput" type="hidden" name="" th:value="${draft.draftText}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span
                        class="c-red">*</span>稿件类型：</label>
                <div class="layui-input-inline" style="line-height: 37px">
<!--                    <input name="draftType" th:checked="${draft.draftType eq c.key}" type="radio"-->
<!--                           th:each="c:${draftTypes}"  th:value="${c.key}" th:text="${c.value}"/>-->
                    音频稿件
<!--                        <input name="draftType" type="radio" th:if="${draft.draftType}==3" th:text="音频稿件" checked/>-->
                    <!--<input type="text" class="layui-input" th:value="${draft.draftType}" name="draftType"  placeholder="修改稿件类型" id="draftType"/>-->
                </div>
            </div>

            <div class="layui-form-item" th:if="${noFlag ne '1001'}">
                <label class="layui-form-label">音频：</label>
                <div class="layui-input-inline" style="line-height:20px;">
                    <div class="layui-input-block">
                        <audio th:src="${audioUrl}" id="audioUrl" controls="controls"></audio>
                    </div>
                    <input type="hidden" th:value="${audio?.audioUrl}" id="audiourlss">
                </div>
            </div>
            <div th:if="${downFlag ne '1001'}">
            <div class="layui-form-item" th:if="${draft.statusCode eq 1009 || upFlag eq '1001'}">
                <label class="layui-form-label"><span
                        class="c-red">*</span>上传音频：</label>
                <div class="layui-input-inline">
                    <div style="display:inline" >
                        <label th:for="${'filesave'}" title="点击上传">
                            <a title="上传"
                               class="layui-btn">上传</a>
                        </label>
                        <input style="display: none" th:id="${'filesave'}" class="filesave" type="file"  name="file"
                               multiple="multiple" accept="audio/*"  th:data-url="${'/admin/audio/saveAudio?id='+draft.id}">
                    </div>
                </div>
            </div>
            </div>

            <div class="layui-form-item" th:if="${firstFlag eq '1001'}">
                <label class="layui-form-label">查看视频：</label>
                <div class="imgcon" style="float:left;">
                </div>
                <input type="hidden" value="" name="meetingIcon" class="goods_img">
                <input type="hidden" th:value="${video?.id}" id="videoId" >
                <div class="addimg" style="float: left ;">
                    <div id="drag" class="" title="将文件拖拽到此处上传">
                        <label title="点击预览">
                            <video th:src="${video?.videoUrl}" id="videoUrlId" controls="controls" preload="preload"
                                   style="height: 200px;width: 300px;" alt=""></video>
                            <!--                            <input id="videoUrl"  type="hidden"  name="videoUrl" />-->
                        </label>
                    </div>
                </div>
                <input  style="display: none" class="fileupload" type="file"  name="file"
                        multiple="multiple"   th:data-url="${'/admin/fileUpload/uploadAudioVideo?draftId='+audio.draftId+'&groupId='+audio.groupId}">
            </div>

            <input type="hidden" name="draftNum"  placeholder="修改稿件字数" id="draftNum"/>
            <input type="hidden" name="id"  th:value="${draft.id}"/>
            <input type="hidden" name="audioId"  id="audioId" th:value="${audio?.id}"/>

<!--            <div class="layui-form-item" th:if="${draft.isPass ne 2}">-->
<!--                <label class="layui-form-label">驳回理由：</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <textarea placeholder="请入驳回理由" type="text" rows="10"   cols="100"  id="disAllowdReason"  name="disAllowdReason"/></textarea>-->
<!--                </div>-->
<!--            </div>-->

            <div class="layui-form-item" th:if="${checkFlag eq '1001'}">
                <label class="layui-form-label">驳回理由：</label>
                <div class="layui-input-block">
                    <textarea placeholder="请入驳回理由" th:if="${reasonFlag ne '1001'}" type="text" rows="10"   cols="100"  id="disAllowdReason"  name="disAllowdReason"/></textarea>
                    <textarea placeholder="请入驳回理由" th:if="${reasonFlag eq '1001'}" th:text="${reason}" type="text" rows="10"   cols="100"  id="disAllowdReason"  name="disAllowdReason"/></textarea>
                </div>
            </div>
            <div class="layui-form-item" th:if="${checkFlag eq '1001'}">
                <label class="layui-form-label">驳回时间：</label>
                <div class="layui-input-block">
                    <div th:if="${reasonFlag eq '1001'}" th:text="${#temporals.format(reasonTime, 'yyyy-MM-dd HH:mm:ss')}" ></div>
                </div>
            </div>
            <div class="layui-input-block" th:if="${buttonFlag eq '1001'}">
                <button id="submit" type="submit" th:if="${realseFlag eq '1001'}" class="layui-btn" >发布</button>
                <a th:if="${agreeFlag eq '1001'}" title="通过" href="javascript:;" th:onclick="'pass(' + ${draft.id} + ')'"
                   class="layui-btn"  style="text-decoration:none">通过</a>
                <a  th:if="${rejectFlag eq '1001'}" class="layui-btn" href="javascript:;" id="reject"  th:onclick="'reject(' + ${draft.id} + ')'">
                    驳回
                </a>
                <a  th:if="${updateFlag eq '1001'}" class="layui-btn" href="javascript:;" id="update"  th:onclick="'update(' + ${draft.id} + ')'">
                    修改
                </a>
<!--                <a   class="layui-btn" href="javascript:;" id="fileOut"  th:onclick="'fileOut(' + ${draft.id} + ')'">-->
<!--                    导出-->
<!--                </a>-->
            </div>

        </form>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<div th:replace="_footer :: footerjs"></div>
<div th:replace="_ueditor :: ueditor"></div>
<!--/_footer 作为公共模版分离出去-->
<link rel="stylesheet" type="text/css" th:href="@{/xadmin/lib/formSelect/formSelects-v4.css}"/>
<script type="text/javascript" th:src="@{/xadmin/lib/formselect/formSelects-v4.js}"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/vendor/jquery.ui.widget.js}"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.iframe-transport.js}"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.fileupload.js}"></script>
<!--请在下方写此页面业务相关的脚本-->
<script>
    $(function(){
        var audioUrl = $("#audiourlss").val();
        if(audioUrl.trim() != ""){
            $("#submit").show();
        }else {
            $("#submit").hide();
        }
    })
    function reject(draftId){
        var disAllowdReason = $('#disAllowdReason').val().trim();
        var draftTitle = $('#draftTitle').val()
        var draftText = UE.getEditor('editor').getContent()
        var draftNum = UE.getEditor('editor').getContentTxt().length;
        let fileName = $('#fileName').val()
        if(disAllowdReason.length == 0){
            selfmsg('请输入驳回理由!');
            return;
        }
        if(draftNum == 0){
            selfmsg("内容不能为空");
            return false
        }
        if(draftTitle.length == 0){
            selfmsg("标题不能为空");
            return false;
        }
        if(fileName.length == 0){
            selfmsg('请输入稿件文件名')
            return false;
        }
        $.ajax({
            type:'post',
            url:"/admin/audio/checkAudioFail",
            cache: false,
            data:{
                "draftId":draftId,
                "reason":disAllowdReason,
                "audioId":$('#audioId').val(),
                "draftTitle":draftTitle,
                "draftText":draftText,
                "draftNum":draftNum,
                "fileName":fileName,
            },  //重点必须为一个变量如：data
            dataType:'json',
            success:function(data){
                if (data.code == "1") {
                    selfmsg('驳回成功!', 1, function () {
                        window.location.reload();
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.location.reload();
                        parent.layer.close(index);
                        $.unlock()
                    });
                }else {
                    selfmsg('提交失败!');
                    $.unlock()
                }
            },
            error:function(){
                selfmsg('提交异常!',5);
                $.unlock()
            }
        });
    }

    function update(draftId){
        var draftTitle = $('#draftTitle').val()
        var draftText = UE.getEditor('editor').getContent()
        var draftNum = UE.getEditor('editor').getContentTxt().length;
        var fileName = $('#fileName').val()
        if(draftNum == 0){
            selfmsg("内容不能为空");
            return false
        }
        if(draftTitle.length == 0){
            selfmsg("标题不能为空");
            return false;
        }
        if(fileName.length == 0){
            selfmsg('请输入稿件文件名')
            return false;
        }
        $.ajax({
            type:'post',
            url:"/admin/audio/update",
            cache: false,
            data:{
                "draftId":draftId,
                "audioId":$('#audioId').val(),
                "draftTitle":draftTitle,
                "draftText":draftText,
                "draftNum":draftNum,
                "fileName":fileName,
            },  //重点必须为一个变量如：data
            dataType:'json',
            success:function(data){
                if (data.code == "1") {
                    selfmsg('修改成功!', 1, function () {
                        window.location.reload();
                        var index = parent.layer.getFrameIndex(window.name);
                        // parent.location.reload();
                        // parent.layer.close(index);
                        $.unlock()
                    });
                }else {
                    selfmsg('修改失败!');
                    $.unlock()
                }
            },
            error:function(){
                selfmsg('修改异常!',5);
                $.unlock()
            }
        });
    }
        function pass(draftId) {
            var draftTitle = $('#draftTitle').val()
            var draftText = UE.getEditor('editor').getContent()
            var draftNum = UE.getEditor('editor').getContentTxt().length;
            let fileName = $('#fileName').val();
            layer.open({
                title: '审核提示',
                content: '确认审核通过吗?',
                btn: ['确认', '取消'],
                yes: function (index, layero) {//两个参数:当前层索引,当前层DOM对象
                    //按钮【确认】的回调
                    if (draftNum == 0) {
                        selfmsg("内容不能为空");
                        return false
                    }
                    if (draftTitle.length == 0) {
                        selfmsg("标题不能为空");
                        return false;
                    }
                    if (fileName.length == 0) {
                        selfmsg('请输入稿件文件名')
                        return false;
                    }
                    $.lock()
                    $.ajax({
                        type: 'post',
                        url: "/admin/audio/checkSuccess",
                        cache: false,
                        data: {
                            "id": $('#audioId').val(),
                            "draftId": draftId,
                            "draftTitle": draftTitle,
                            "draftText": draftText,
                            "draftNum": draftNum,
                            "fileName": fileName,
                        },  //重点必须为一个变量如：data
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == "1") {
                                selfmsg('审核通过!', 1, function () {
                                    window.location.reload();
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.location.reload();
                                    parent.layer.close(index);
                                    $.unlock()
                                });
                            } else {
                                selfmsg('提交失败!');
                                $.unlock()
                            }
                        },
                        error: function () {
                            selfmsg('提交异常!', 5);
                            $.unlock()
                        }
                    });
                },
                btn2: function (index, layero) {
                    //按钮【取消】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                },
            });
        };

        $(function () {
            $('.filesave').fileupload({
                dataType: 'json',
                change: function (e, data) {
                    var len = $('.imgcon').children().length;
                    if (data.files.length > (1 - parseInt(len))) {
                        layer.msg('最多上传1张图片');
                        return false;
                    }
                },
                start: function (e) {
                    layer_msg = layer.msg('正在上传中…', {time: 100000000});
                },
                progressall: function (e, data) {
                    $('.layui-layer-msg .layui-layer-content').html('已上传' + (data.loaded / data.total * 100).toFixed(2) + '%');
                },
                done: function (e, data) {
                    // window.location.reload();
                    // var index = parent.layer.getFrameIndex(window.name);
                    // parent.location.reload();
                    // parent.layer.close(index);
                    $('#audioUrl').attr("src", data.result.msg);
                    layer.close(layer_msg);
                    $("#submit").show();
                },
                done: function (e, data) {
                    $('#audioUrl').attr("src", data.result.msg);
                    layer.close(layer_msg);
                    $("#submit").show();
                }
            });

        });

        $(function () {
            $('.fileupload').fileupload({
                dataType: 'json',
                change: function (e, data) {
                    var len = $('.imgcon').children().length;
                    if (data.files.length > (1 - parseInt(len))) {
                        layer.msg('最多上传1张图片');
                        return false;
                    }
                },
                start: function (e) {
                    layer_msg = layer.msg('正在上传中…', {time: 100000000});
                },
                progressall: function (e, data) {
                    $('.layui-layer-msg .layui-layer-content').html('已上传' + (data.loaded / data.total * 100).toFixed(2) + '%');
                },
                done: function (e, data) {
                    window.location.reload();
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.location.reload();
                    parent.layer.close(index);
                    //layer.close(layer_msg);
                }
            });

        });

        layui.use(['form', 'layer', 'laydate'], function () {
            $ = layui.jquery;
            var form = layui.form,
                laydate = layui.laydate,
                layer = layui.layer;
            lay('.timeSpace').each(function () {
                laydate.render({
                    elem: this
                    , trigger: 'click'
                    , type: 'datetime'
                });
            });
        });
        $(function () {
            $("#form-draft-edit").validate({
                rules: {//自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。
                    draftTitle: {
                        required: true,
                    },
                    draftText: {
                        required: true,
                    },
                    draftNum: {
                        required: true,
                    },
                    draftType: {
                        required: true,
                    },
                    fileName: {
                        required: true,
                    },
                },
                onkeyup: false,//类型 Boolean，默认 true，指定是否在敲击键盘时验证。
                debug: true,//进行调试模式（表单不提交）。
                success: "valid",//要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。
                submitHandler: function (form) {//通过验证后运行的函数，里面要加上表单提交的函数($(form).ajaxSubmit();)，否则表单不会提交。
//            var data = UE.getEditor('editor').getContent();
//            $("#editorInput").val(data);
                    var draftNum = UE.getEditor('editor').getContentTxt().length;
                    $("#draftNum").val(draftNum);
                    $.lock();
                    $(form).ajaxSubmit({//使用 ajax 方式提交
                        type: 'POST',
                        url: "/admin/audio/addAudio",
                        success: function (data) {
                            if (data.code == "1") {
                                selfmsg('发布成功!', 1, function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.location.reload();
                                    parent.layer.close(index);
                                });
                            } else {
                                $.unlock();
                                selfmsg('发布失败!');
                            }
                        },
                        error: function () {
                            $.unlock();
                            selfmsg('发布异常!', 5);
                        }
                    });
                }
            });
        });

        function showTxt() {
            var preHtml = UE.getEditor('editor').getContent(); <!-- execCommand( 'preview' );-->
            layer.open({
                title: '稿件预览',
                content: preHtml,
                btn: ['确定', '取消'],
                yes: function (index, layero) {//两个参数:当前层索引,当前层DOM对象
                    //按钮【确认】的回调
                },
                btn2: function (index, layero) {
                    //按钮【取消】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                },
            });
        };

</script>
<!--/请在上方写此页面业务相关的脚本-->

<script>

    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var form = layui.form;
        // 监听全选
        form.on('checkbox(checkall)', function(data){

            if(data.elem.checked){
                $('tbody input').prop('checked',true);
            }else{
                $('tbody input').prop('checked',false);
            }
            form.render('checkbox');
        });
        form.on('select(selectchange)', function(data){
            console.log(data.value); //得到被选中的值
            var pageNo = $('#pageNo');
            var Form = $('form')
            pageNo.val(1);
            Form.submit();
            form.render('select');
        });
        //日期时间范围选择
        laydate.render({

        });
        lay('.timeSpace').each(function(){
            laydate.render({
                elem: this
                ,type: 'datetime'
                ,range: true //或 range: '~' 来自定义分割字符
            });
        });
    });

</script>

<script>

    //删除图片
    function closeImg(obj) {
        $(obj).parent().remove();
        // var goods_img = '';
        // $('.imgcon .img_div').each(function () {
        //     goods_img += $(this).find('img').attr('src') + ',';
        // })
        $('.meetingIcon').val('');
        if ($('.imgcon').children().length == 1) {
            $('.addimg').css('display', 'none');
        }
        if ($('.imgcon').children().length < 1) {
            $('.addimg').css('display', 'inline-block');
        }
    }

    //上传图片
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            dropZone: $('#drag'),
            change: function (e, data) {
                var len = $('.imgcon').children().length;
                if (data.files.length > (1 - parseInt(len))) {
                    layer.msg('最多上传1张图片');
                    return false;
                }
            },
            start: function (e) {
                layer_msg = layer.msg('正在上传中…', {time: 100000000});
            },
            progressall: function (e, data) {
                $('.layui-layer-msg .layui-layer-content').html('已上传' + (data.loaded / data.total * 100).toFixed(2) + '%');
            },
            done: function (e, data) {
                $('#videoUrlId').attr("src",data.result.msg);
                layer.close(layer_msg);
            }
        });
        $('#drag').bind('drop dragover', function (e) {
            e.preventDefault();
        }).on('dragenter', function (e) {
            $(this).addClass('dragenter');
        }).on('drop', function (e) {
            $(this).removeClass('dragenter');
        }).on('dragleave', function (e) {
            $(this).removeClass('dragenter');
        });

        /**
         * 数据回调
         * @param id
         * @param value
         */
        function callback(value) {
            var $li = $(
                "<div class=\"img_div\">" +
                "<a onclick=\"$(this).attr('href', $(this).find('img').attr('src'))\" type=\"button\"  data-lightbox=\"preview\">" +
                "<video src=\"" + value + "\" alt=\"\" style='height: 200px;" +
                "width:300px;' controls=\"controls\"  preload='preload'>" + "</video>" +
                "</a>" +
                "<i class='layui-icon layui-icon-delete close' onclick='closeImg(this)'></i>" +
                "</div>"
            );
            $('.imgcon').append($li);
            if ($('.imgcon').children().length == 1) {
                $('.addimg').css('display', 'none');
            }
            // var goods_img = '';
            // $('.imgcon .img_div').each(function () {
            //     goods_img += $(this).find('img').attr('src') + ',';
            // })
            $('.goods_img').val($(this).find('img').attr('src'));
            $("#videoUrl").val(value);
        }

        //图片回显
        if ("$document.getElementsByName('name')" != '') {
            var goods_img = $(document.getElementsByName('name'));
            $('.goods_img').val(goods_img);
            // var arr = goods_img.split(',');
            // for (var i = 0; i < arr.length; i++) {
            //     if (arr[i] != '') {
            //         callback(arr[i]);
            //     }
            // }
            if ($('.imgcon').children().length == 1) {
                $('.addimg').css('display', 'none');
            }

        }
    });
</script>
</body>
</html>